<template>
	<div>
		<vanButton @click="open">按钮</vanButton>
		<van-popup v-model="show" position="bottom" :style="{ width: '100%', height: '80%' }">
			<div class="container">
				<div class="header">
					<van-button @click="close">取消</van-button>
					<van-button @click="checkTimeList">确认</van-button>
				</div>
				<van-tabs v-model="active">
					<van-tab title="开始时间" name="1">
						<vanDatetimePicker :show-toolbar="false" v-model="dateList[0]" type="date"></vanDatetimePicker>
					</van-tab>
					<van-tab title="结束时间" name="2">
						<vanDatetimePicker :show-toolbar="false" v-model="dateList[1]" type="date"></vanDatetimePicker>
					</van-tab>
				</van-tabs>

			</div>
		</van-popup>
	</div>

</template>
<script>
import dayjs from "dayjs";
import { Popup, Button, Tab, Tabs, DatetimePicker } from 'vant';
export default {
	components: {
		vanPopup: Popup,
		vanButton: Button,
		vanTab: Tab,
		vanTabs: Tabs,
		vanDatetimePicker: DatetimePicker
	},
	props: {
		dateList: {
			type: Array,
			default: () => [new Date(), new Date()]
		}
	},
	data() {
		return {
			show: false,
			active: 1,
			newDateList: []
		};
	},
	methods: {
		close() {
			this.show = false
		},
		checkTimeList() {
			this.newDatelist = this.dateList.map(ite => {
				if (ite) {
					return dayjs(ite).format("YYYY-MM-DD")
				} else {
					return ''
				}
			})
			console.log(this.dateList, this.newDatelist);
			this.$emit('checkTimeList', this.newDateList)
		}
	}
};
</script>
<style scoped lang="scss">
.container {
	padding: 10px;

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}
</style>
